<template>
    <div class="scroller-view" :style="{height: height}">
        <slot></slot>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
export default defineComponent({
    props: {
        height: {
            type: String as PropType<String>,
            default: "100%"
        }
    },
})
</script>

<style lang="scss">
.scroller-view {
    overflow-y: hidden;
    &:hover {
        overflow-y: auto;
    }
}
.scroller-view::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color:#F5F5F5;
}
.scroller-view::-webkit-scrollbar-track {
    border-radius:10px;
    background-color:#E4E7ED;
}
.scroller-view::-webkit-scrollbar-thumb {
    border-radius:10px;
    background-color:#C0C4CC;
}
</style>